<template>
    <el-form ref="form" :model="curData" status-icon>
        <el-col :span="20" :offset="2">
            <div class="treeBody">
                <el-scrollbar wrap-class="scrollbar-wrap" view-class="scrollbar-view">
                    <el-tree
                        ref="tree"
                        :data="menus"
                        show-checkbox
                        highlight-current
                        default-expand-all
                        :default-checked-keys="leafMenus"
                        node-key="id">
                    </el-tree>
                </el-scrollbar>
            </div>
        </el-col>

        <el-form-item class="formBtn" style="margin: 0 auto;">
            <el-button type="info" @click="handleCancel" size="medium">取消</el-button>
            <el-button type="primary" @click="handleSubmit" size="medium">确定</el-button>
        </el-form-item>
    </el-form>

</template>

<script>
    import edtiMixin from '@/mixins/edit.mixin'
    import {mapState, mapActions} from 'vuex'
    export default {
        mixins: [edtiMixin],
        data() {
            return {
                leafMenus: [],
                editApi: this.$api.system.role.toMenus
            };
        },
        computed: {
            ...mapState('basic', ['menus'])
        },
        methods: {
            ...mapActions('basic', ['doMenusOfBasic']),
            doRoleOfMenus() {
                this.$ajax.get(this.$api.system.role.ofMenus,{id:this.curData.id}).then(result => {
                    this.leafMenus = result.bean.filter(menu => menu.leaf == 1).map(menu=>menu.id);
                });
            },
            resetEditParams(params) {
                let keys = this.$refs.tree.getCheckedKeys();
                let halfkeys = this.$refs.tree.getHalfCheckedKeys();
                params = {...params,...{menuIds:[...keys,...halfkeys]}};
                return params;
            }
        },
        mounted() {
            this.doMenusOfBasic();
            this.doRoleOfMenus();
        }
    }
</script>

<style scoped lang="less">
    @import "../../../assets/css/common.less";

    .treeBody {
        border: 1px solid #DCDFE6;
        height: 350px;
        padding: 5px 5px;
        margin-bottom: 10px;
    }
</style>

